<template>
    <el-card >
      <!-- 搜索 -->
      <el-form :model="searchForm" class="mb-3" size="small">
        <el-row>
          <el-col :span="6">
            <el-form-item label="關鍵詞">
              <el-input
                v-model="searchForm.keyword"
                placeholder="產品名/用戶名"
                clearable
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="6">
            <el-button type="primary" @click="getData">搜索</el-button>
            <el-button @click="resetSearchForm">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
  
      <!-- 新增刷新 -->
      <ListHeader layout="refresh" @refresh="getData"></ListHeader>
  
      <!-- 表格 -->
  
      <el-table :data="tableData" style="width: 100%" v-loading="loading">
        <el-table-column prop="username" label="用戶名" />
      
        <el-table-column prop="name" label="產品名" />
         
     
        <el-table-column prop="contents" label="評論內容" />
  
        <el-table-column prop="created_at" label="評論時間" />
        <el-table-column label="是否顯示">
          <template #default="{ row }">
            <el-switch
              v-model="row.status"
              :active-value="1"
              :inactive-value="0"
              @change="handleStatusChange($event, row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        class="flex justify-center mt-4"
        @current-change="getData"
        :current-page="curpage"
        :page-size="limit"
      />
  

    </el-card>
  </template>
  
  <script setup>
  import {getcomment,update,} from "@/api/comment.js";
  import ListHeader from "@/components/ListHeader.vue";
  import { useInitTable} from "@/composables/useCommon.js";
  
  const {
    searchForm,
    resetSearchForm,
    tableData,
    loading,
    curpage,
    total,
    limit,
    getData,
    handleStatusChange,
  } = useInitTable({
    searchForm: {
      keyword: "",
    },
    getList: getcomment,
    updateStatus: update,
  });

  

  </script>
  